<template>
    <div class="movie_body">
        <ul>
          <li v-for="item in comingsoonlist" :key="item.id">
            <img :src="item.img" alt="无法显示图片"/>
            <div class="info">
              <h3>{{item.moviename}}</h3>
              <p><span>{{item.people}}</span> 人想看</p>
              <p>主演: {{item.star}}</p>
              <p>{{item.date}}</p>
            </div>
          </li>
        </ul>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
   data() {
      return {
        comingsoonlist:[],
        //上次进入此页面时的城市数据
        lastcityid:null,
      }
   },
   created(){
     
   },
   activated(){
     window.sessionStorage.setItem('lastpath','/movie/comingsoon')
    var nowcityid = this.$store.state.city.id
    //如果城市数据没变,就不重新发送请求获取数据了
    if(this.lastcityid==nowcityid){
      return  
    }
    this.getcomingsoonlist()

    
   },
   methods:{
     async getcomingsoonlist(){
      const res = await this.$axios.get('http://192.168.43.145:3000/comingsoon')
      if(res.status==200){    
        this.comingsoonlist=res.data.comingsoonlist
        this.lastcityid=this.$store.state.city.id
      }else{
        Toast('请求失败')
      }
    },
   },
}
</script>

<style  scoped>
.info span {
  font-weight: 700;
  font-size: 0.8125rem !important;
}
.info h3{
    font-size:1.0625rem
}
li {
  box-sizing: border-box;
  height: 6.8125rem;
  border-bottom: 0.0625rem dotted #e6e6e6;
  padding: 0.75rem 1rem 0.9375rem 1rem;
  position: relative;
}
li img {
  width: 4rem;
  height: 5.5625rem;
  object-fit: cover; /*各种图片大小都可适应*/
  float: left;
}
li .info {
  float: left;
  margin-left: 0.875rem;
}
li .info span {
  font-size: 1.125rem;
  line-height: 1.375rem;
}
li .info p {
  font-size: 0.8rem;
  line-height: 1.4375rem;
  color: #666;
}
li > p {
  float: right;
  font-size: 1.0625rem;
  color: #fc7103;
}
.btn_pre {
  width: 47px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  background-color:#3c9fe6;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: white;
  position: absolute;
  top: 43px;
  right: 13px;
}
</style>
